<template>
    <div class="shop-transcity-add-or-update">
        <el-dialog
                :close-on-click-modal="false"
                :modal="false"
                :visible.sync="visible"
                title="选择配送区域">
            <el-form :model="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px" ref="dataForm"
                     style="height:400px">
                <el-scrollbar style="height:100%">
                    <el-form-item label="配送区域" size="mini">
                        <el-tree
                                :data="menuList"
                                :props="menuListTreeProps"
                                node-key="areaId"
                                ref="menuListTree"
                                show-checkbox
                                v-if="visible">
                        </el-tree>
                    </el-form-item>
                </el-scrollbar>
            </el-form>
            <span class="dialog-footer" slot="footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button @click="dataFormSubmit()" type="primary">确定</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
    import {treeDataTranslate} from '@/utils'

    export default {
        data() {
            return {
                type: 0,
                visible: false,
                menuList: [],
                rowIndex: 0,
                menuListTreeProps: {
                    label: 'areaName',
                    children: 'children'
                },
                dataForm: {
                    transfeeId: 0
                }
            }
        },
        methods: {
            init(rowIndex, cityList, allSelectCityList, type) {
                this.type = type
                this.rowIndex = rowIndex
                if (this.menuList.length === 0) {
                    // 获取所有省和市
                    this.$http({
                        url: this.$http.adornUrl('/admin/area/list'),
                        method: 'get',
                        params: this.$http.adornParams()
                    }).then(({data}) => {
                        this.menuList = treeDataTranslate(data, 'areaId', 'parentId')
                    }).then(() => {
                        this.visible = true
                        this.disabledNodes(cityList, allSelectCityList)
                        this.$nextTick(() => {
                            this.$refs['dataForm'].resetFields()
                            this.$refs.menuListTree.setCheckedNodes(cityList)
                        })
                    })
                } else {
                    this.visible = true
                    this.disabledNodes(cityList, allSelectCityList)
                    this.$nextTick(() => {
                        this.$refs['dataForm'].resetFields()
                        this.$refs.menuListTree.setCheckedNodes(cityList)
                    })
                }
            },
            disabledNodes(cityList, allSelectCityList) {
                for (let i = 0; i < this.menuList.length; i++) {
                    const childrens = this.menuList[i].children
                    this.menuList[i].disabled = false
                    let disabledNum = 0
                    for (let j = 0; j < childrens.length; j++) {
                        const city = childrens[j]
                        this.menuList[i].children[j].disabled = false
                        let allHasCity = allSelectCityList.findIndex((item) => city.areaId === item.areaId) > -1
                        let listHasCity = cityList.findIndex((item) => city.areaId === item.areaId) > -1
                        if (allHasCity && !listHasCity) {
                            this.menuList[i].children[j].disabled = true
                            disabledNum++
                        }
                    }
                    if (disabledNum === this.menuList[i].children.length) {
                        this.menuList[i].disabled = true
                    }
                }
            },
            // 表单提交
            dataFormSubmit() {
                this.$emit('refreshDataList', this.rowIndex, this.$refs.menuListTree.getCheckedNodes(true), this.type)
                this.visible = false
            }
        }
    }
</script>

<style lang="scss">
    .shop-transcity-add-or-update {
        .el-scrollbar__wrap {
            overflow-x: hidden;
        }
    }
</style>
